import { OrderConfirm } from '@/types/orderConfirm'
import { OrderProduct } from '@/types/orderList/index'
import React, { FC } from 'react'
import welfareUrl from '@/assets/images/order_card_welfare_pic_2x.png'
import { EOrderStatus } from '@/types/enum'
interface OrderGoodsParam {
  product: OrderProduct
  status: EOrderStatus
}
const orderGoods: FC<OrderGoodsParam> = (props) => {
  const data = props.product
  return (
    <div className="w-full p-r1.2 ">
      {props.status === EOrderStatus.notPay ? (
        <div className="  relative  font-regular font-medium text-r1.2 text-red-E02727  h-r2.9 leading-r2.9">
          <span></span>
          <span> 未支付订单会在15分钟后取消</span>
        </div>
      ) : (
        ''
      )}
      <div className="w-full text-gray-333333 text-r1.4 font-medium relative">
        <span className=" text-white bg-orange-DCAF80 font-normal text-r1.2  h-r1.6 w-r2.8 text-center rounded-r0.2 inline-block mr-r0.4">
          {data.subjectName}
        </span>
        <span className=" leading-r2.2">{data.productName}</span>
        <span className=" leading-r2.2 absolute right-2 ">¥{data.realPrice}</span>
      </div>
      <div className=" mt-r0.8 mb-r0.8 text-gray-666666 font-normal font-regular">
        {data.showName} ·共{data.totalSections}讲
      </div>
      <div className=" mt-r1.2 mb-r1.2 text-gray-999999  font-normal font-regular">
        {props.product.teacherInfos.map((val, key) => {
          return (
            <span key={key}>
              <span>
                {val.teacherType === '1' ? '授课' : '主讲'}：{val.teacherName}
              </span>
            </span>
          )
        })}
        {props.product.foreignInfos.map((val, key) => {
          return (
            <span key={key}>
              <span>
                {'外教'}：{val.teacherName}
              </span>
            </span>
          )
        })}
      </div>
      <div className="w-full bg-white leading-r1.9 ">
        <img className=" w-r2.8 h-r1.6 mr-r0.4 -mt-r0.4 inline-block" src={welfareUrl}></img>
        {props.product.giveawayInfos.map((val, key) => {
          return (
            <span key={key} className=" leading-r1.9 ">
              {val.productName} x {val.productNum}
            </span>
          )
        })}
      </div>
    </div>
  )
}
export default orderGoods
